<template>
    <div class="case-code-container">
        <div id="line-case-2" class="chart-container">

        </div>
        <highlightjs class="code" lang="js" :code="code"></highlightjs>
    </div>
</template>

<script setup>
    /**
     * 折线图中折线的样式可以通过 lineStyle 设置。可以为其指定颜色、线宽、折线类型、阴影、不透明度等等，具体的可以参考配置项手册 series.lineStyle 了解。
     * 数据点的样式可以通过 series.itemStyle 指定填充颜色（color）、描边颜色（borderColor）、描边宽度（borderWidth）、描边类型（borderType）、阴影（shadowColor）、不透明度（opacity）等。
     */
    import { code } from './code/case2.js';
    import * as echarts from 'echarts';
    import { onMounted } from 'vue';
    onMounted(() => {
        // 基于准备好的dom，初始化echarts实例
        const dom = document.getElementById('line-case-2');
        const myChart = echarts.init(dom, 'dark', { renderer: 'svg' });

        // 绘制图表
        /** @type {echarts.EChartsOption} */
        const option = {
            title: { text: '折线图样式设置' },
            tooltip: {},
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月'],
            },
            yAxis: { type: 'value' },
            series: [
                {
                    name: '衬衫的销量',
                    type: 'line',
                    data: [5, 20, 36, 10, 10, 20],
                    // ★★★折线图中折线的样式可以通过 lineStyle 设置。
                    lineStyle: {
                        color: 'skyblue',
                        width: 2,
                        type: 'dashed',
                    },
                    // ★★★数据点的样式可以通过 series.itemStyle 指定填充颜色（color）、描边颜色（borderColor）、描边宽度（borderWidth）、描边类型（borderType）、阴影（shadowColor）、不透明度（opacity）等。
                    itemStyle: {
                        color: 'red',
                        borderColor: 'yellow',
                        borderWidth: 2,
                        opacity: 0.5,
                    },
                },
            ],
        };
        myChart.setOption(option);
    });
</script>

<style lang="scss" scoped>
</style>
